<template>
    <div style="border: 1px solid #ccc">
        <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig"
            :mode="mode" />
        <Editor style="height: 500px; overflow-y: hidden;" v-model="valueHtml" :defaultConfig="editorConfig"
            :mode="mode" @onChange="returnHtml" @onCreated="handleCreated" />
    </div>
</template>

<script setup>
import '@wangeditor/editor/dist/css/style.css' // 引入 css
// import { onBeforeUnmount, ref, shallowRef, onMounted, defineEmits,defineProps } from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import { uploadUrl } from "~/utils/request"

// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef()

const props = defineProps({
    productDesc: String
})

// 内容 HTML
const valueHtml = ref('')
const mode = ref('defalut')

// 模拟 ajax 异步获取内容
onMounted(() => {
    console.log(props.productDesc);
    setTimeout(() => {
        valueHtml.value = props.productDesc
    }, 1000);
})

const toolbarConfig = {}
const editorConfig = { placeholder: '请输入内容...', MENU_CONF: {} }

editorConfig.MENU_CONF['uploadImage'] = {
    // 上传图片的配置
    server: uploadUrl,
    maxFileSize: 10 * 1024 * 1024,
    fieldName: 'file',
    meta: {
        type: 7
    },
    onError(file, err, res) {
        ElMessage.error(`${file.name} 上传出错`)
    },
    customInsert(res, insertFn) {                  // JS 语法
        // res 即服务端的返回结果
        let url = res.data.url
        let href = ''
        let alt = res.data.fieldName
        // 从 res 中找到 url alt href ，然后插入图片
        insertFn(url, alt, href)
    },
}
editorConfig.MENU_CONF['uploadVideo'] = {
    // 上传图片的配置
    server: uploadUrl,
    maxFileSize: 400 * 1024 * 1024,
    fieldName: 'file',
    meta: {
        type: 7
    },
    onError(file, err, res) {
        ElMessage.error(`${file.name} 上传出错`)
    },
    customInsert(res, insertFn) {                  // JS 语法
        // res 即服务端的返回结果
        let url = res.data.url
        insertFn(url)
    },
}

// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
    const editor = editorRef.value
    if (editor == null) return
    editor.destroy()
})
// 返回内容
const emit = defineEmits(['changeHtml'])

function returnHtml() {
    emit('changeHtml', valueHtml.value)
}

const handleCreated = (editor) => {
    editorRef.value = editor // 记录 editor 实例，重要！
}
</script>